<template>
  <div class="app-container">
    <!-- 涉及到 wss的要么在本地http://localhost/调用要么在 https  -->
    <!-- 顶部导航栏 -->
    <header class="app-header">
      <div class="logo-container">
        <img src="./assets/logo.png" alt="Vue logo" class="logo" />
        <h1 class="app-title">语音转文字方案演示</h1>
      </div>
    </header>

    <!-- 方案选择区域 -->
    <div class="scheme-selector">
      <el-radio-group 
        v-model="selectedScheme" 
        class="radio-group"
        size="medium"
      >
        <el-radio 
          :label="1" 
          class="radio-option"
        >
          <i class="el-icon-microphone"></i>
          <span>方案一：浏览器原生 Web Speech API</span>
        </el-radio>
        <el-radio 
          :label="2" 
          class="radio-option"
        >
          <i class="el-icon-cloud"></i>
          <span>方案二：阿里云实时语音转文字 API</span>
        </el-radio>
      </el-radio-group>
    </div>

    <!-- 内容展示区域 -->
    <main class="content-area">
      <!-- 方案一内容 -->
      <transition name="fade">
        <el-card 
          v-if="selectedScheme === 1" 
          shadow="hover" 
          class="scheme-card"
        >
          <div slot="header" class="card-header">
            <i class="el-icon-microphone"></i>
            <span>浏览器原生 Web Speech API</span>
          </div>
          <SpeechRecognitionNative />
        </el-card>
      </transition>

      <!-- 方案二内容 -->
      <transition name="fade">
        <el-card 
          v-if="selectedScheme === 2" 
          shadow="hover" 
          class="scheme-card"
        >
          <div slot="header" class="card-header">
            <i class="el-icon-cloud"></i>
            <span>阿里云实时语音转文字 API</span>
          </div>
          <SpeechRecognitionAliyun />
        </el-card>
      </transition>
    </main>

    <!-- 页脚信息 -->
    <footer class="app-footer">
      <p>语音转文字演示工具</p>
    </footer>
  </div>
</template>

<script>
import SpeechRecognitionNative from './components/SpeechRecognitionNative.vue';
import SpeechRecognitionAliyun from './components/SpeechRecognitionAliyun.vue';

export default {
  name: 'App',
  components: {
    SpeechRecognitionNative,
    SpeechRecognitionAliyun
  },
  data() {
    return {
      selectedScheme: 2 // 默认选中方案一
    };
  }
};
</script>

<style scoped>
.app-container {
  min-height: 100vh;
  background-color: #f5f7fa;
  display: flex;
  flex-direction: column;
}

/* 头部样式 */
.app-header {
  background: linear-gradient(135deg, #42b983 0%, #359469 100%);
  color: white;
  padding: 1rem 2rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.logo {
  height: 40px;
  width: 40px;
  animation: spin 8s linear infinite;
}

.app-title {
  margin: 0;
  font-weight: 500;
  font-size: 1.5rem;
}

/* 方案选择区域 */
.scheme-selector {
  padding: 1.5rem 2rem;
  background-color: white;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  margin-bottom: 1rem;
}

.radio-group {
  display: flex;
  gap: 2rem;
  justify-content: center;
}

.radio-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.radio-option:hover {
  background-color: #f0f7f0;
}

.radio-option i {
  font-size: 1.2rem;
}

/* 内容区域 */
.content-area {
  flex: 1;
  padding: 0 2rem 2rem;
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
}

.scheme-card {
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.scheme-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  font-size: 1.1rem;
}

/* 过渡动画 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}

/* 页脚样式 */
.app-footer {
  text-align: center;
  padding: 1rem;
  color: #666;
  font-size: 0.9rem;
  border-top: 1px solid #eee;
  margin-top: auto;
}

/* 动画效果 */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
